<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>缴费</title>
		<style>
			*{
				list-style: none;
				padding: 0px;
				margin: 0px;
				font-family: "微软雅黑";
			}
			
			
			
		li input:checked+label+div{
			display:block;
		}	
		
		/*折叠效果*/
		/*设置一个居中的大盒子*/
		.b{
			width: 414px;
			overflow:hidden;
			margin-left: -15px;
			background-color: white;
		}
		/*给选项设置样式
		.b ul{
			width: 200px;
			margin:50px;
		}*/
		.b li{
			font-size:16px;
			color:#545653;
			line-height: 44px;
			position: relative;
			border-bottom: 1px solid #F0F0EE;
			padding: 0px 25px;
		} 
		.b li input{
			display:none;
		}
		.b li label{
			display:block;
			width: 100%;
			height: 47px;
			border: 1px solid blue;
			padding-left: 20px;
		}
		/*二级菜单设置*/
		.b li div{
			width: 414px;
			height: 0px;
			background-color: #EFEDF0;
			left: 0;
			top: 48px;
			line-height: 30px;
			font-size: 15px;
			transition:0.4s;
			overflow: hidden;
			margin-left: -22px;
			padding:0px 24px;
		}
		/*向下弹出二级菜单*/
		.b li #check22:checked+label+div{
			height: 78px;
		}
		
		.b li #check22:checked+label>span>img{
			-webkit-transform:rotate(-90deg);
			transition:0.4s;
		}
		.b li span{
			float: right;
			margin-right: 10px;
		}
		.b li span img{
			margin-left:8px ;
		}
		.jiafei{
			margin-left: 330px;
			margin-top: -90px;
		}

		div.duo label{border:none; background:url(img/多选.png) no-repeat left;background-size:25px 25px; padding-left:25px;margin-top:2px;height: 40px;}
		div.duo input[name=activity]{display: none;}
		div.duo input[name=activity]:checked + label{ background:url(img/多选1.png) no-repeat left;background-size:25px 25px;}


		</style>
	<link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/jiaofei.css" />
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body class="body">
			<div class="container-fluid header">	
			<div class="row zhangdan">
				<div class="col-xs-12" style="border-bottom: 2px solid #DBDBDB;padding: 0px;">
					<div class="col-xs-1" style="padding: 0px;">
						<p class="tu1"><a href="javascript:history.go(-1)"><img src="img/尖括号.png" height="22px"/></a></p>
					</div>
					<div class="col-xs-1" style="padding: 0px;">
						<p class="tu2"><a href=""><img src="img/关闭.png" height="22px"></a></p>
					</div>
					<div class="col-xs-10" style="padding: 0px;">
						<p class="house">缴费</p>
					</div>
					
				</div>
			</div>
			<form action="WuwapPayServlet" method="post">
			<div class="dizhi" style="position: relative;">
				<img src="img/huabian1.png" width="100%" />
				<p style="color: #3545653;position: absolute;top: 30px;left:75px;font-size: 18px;font-weight: bold;">姓名:${reaList.userName}</p>
				<p style="color: #3545653;position: absolute;top: 60px;left:75px;font-size: 18px;">地址:${reaList.address}</p>
			</div>
			                  
             <div class="duo">
            <ul class="b">
            	<li>
					<input id="check22" class="one" type="checkbox" name="activity" value="test1"><label for="check22">&nbsp;&nbsp;物业费 <span>￥<span id="realFell" class="real">${reaList.realFee}</span></span><img src="img/尖括号右1.png" width="14px" class="jiafei"></label>
               		<div>
               			<p style="color:#545653;">欠费&nbsp;&nbsp;￥${reaList.realFee}<span class="youjian"><img src="img/尖括号右1.png" width="14px"></span></p>
               			<p style="color:#545653;">预缴<span class="hong"><span class="jiahao">+</span><span class="yuejiao">月缴</span><span class="jianhao">-</span></p>
               		</div>
            	</li>
            	<li>
            	
					<input id="check23" class="one" type="checkbox" name="activity" value="test2"><label for="check23">&nbsp;&nbsp;公摊电费 <span>￥<span id="realBill" class="real">${reaList.realBill}</span></span><img src="img/尖括号右1.png" width="14px" class="jiafei"></label>
                  <div></div>
            	</li>
            	<li>
            	
					<input id="check24" class="one" type="checkbox" name="activity" value="test3"><label for="check24">&nbsp;&nbsp;公摊水费 <span>￥<span id="realWater" class="real">${reaList.realWater}</span></span><img src="img/尖括号右1.png" width="14px" class="jiafei"></label>
                 <div></div>
            	</li>

            </ul>    
           </div>
		<div class="xiayibu">
			<input type="hidden" value="" name="realFee" id="realFee"/>
			<input type="hidden" value="" name="realBille" id="realBille"/>
			<input type="hidden" value="" name="realWatere" id="realWatere"/>
			<input type="hidden" value="" name="totall" id="totall"/>
			<p style="color: #080808;font-size: 18px;font-weight: bolder;margin-top: 15px;">总计<span id="total"></span><button type="submit">下一步</button></p>
		</div>
		</form>
	</body>
</html>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jiaofei.js"></script>

